<template>
    <div class="filter-top" :class="showAreaParClass">
        <div @click="setShowAreaFilter" id="show-hide-area" class="opt-filter">
            <span id="opt-filter-area-text" class="opt-filter-text">{{filterText}}</span>
            <van-icon :class="selectAreaIconClass" class="select-area-icon" name="play" />
        </div>

        <!-- 筛选区域弹窗 -->
        <div v-show="isShowAreaFilter" id="area-list-filter-window">
            <div id="area-list-filter-window-first" class="area-list-filter-chi">
                <a 
                id="select-area-all" 
                class="area-list-filter-window-first-opt area-list-filter-chi-opt"
                @click="filterMemberList({areaCode: ''})"
                >
                全部
                </a>
                <a 
                v-for="item in areaList.province"
                :key="item.code"
                @click="selectProArea(item.code, item.name)"
                :class="provinceActCode === item.code ? 'area-list-filter-window-first-opt-active' : ''"
                class="area-list-filter-window-first-cho area-list-filter-window-first-opt area-list-filter-chi-opt"
                > 
                {{item.name}}{{item.count ? `(${item.count}人)` : ''}}
                </a>
            </div>
            <div id="area-list-filter-window-second" class="area-list-filter-chi">
                <a 
                @click="filterMemberList({areaCode: provinceActCode, areaName: provinceActName})"
                id="select-area-second-all" 
                class="area-list-filter-window-second-opt area-list-filter-chi-opt"
                >全部
                </a>
                <a 
                v-for="item in areaList.city"
                :key="item.code"
                @click="selectCityArea(item.code, item.name)"
                :class="cityActCode === item.code ? 'area-list-filter-window-second-opt-active' : ''"
                class="area-list-filter-window-first-cho area-list-filter-window-first-opt area-list-filter-chi-opt"
                > 
                {{item.name}}{{item.count ? `(${item.count}人)` : ''}}
                </a>
            </div>
        </div>
    </div>
</template>

<script>
// UI组件
import { Icon } from "vant"

// 自定义方法
import { commonRequestData } from '_network/request'
import { failTextVantToa, loadingVantToa, clearVantToa } from "_projectFn/prompt"

import Vue from "vue"
Vue.use(Icon)

export default {
    name: 'FilterTop',
    props: {
        overlayShow: {
            type: Boolean,
            default: false
        },
        filterText: {
            type: String,
            default: '区域',
        }
    },
    data() {
        return {
            showWindow: '',
            areaList: {
                province: [],
                city: [],
            },
            provinceActCode: '',
            provinceActName: '',
            cityActCode: '',
        }
    },
    methods: {
        setShowAreaFilter() {
            if (this.isShowAreaFilter) {
                this.showWindow = ''
                this.hideOverlayShow()
            } else {
                this.showWindow = 'area'
                this.showOverlay()
            }
        },
        hideOverlayShow() {
            this.$emit('hideOverlay', 'filterArea')
        },
        showOverlay() {
            this.$emit('showOverlay', 'filterArea')
        },
		getAreaList({
            callback,
            code = 1,
            isFitst = 0
        }) { // 获取区域列表
            if (typeof callback != 'function') {
                return
            }
            if (isFitst === 0) {
                loadingVantToa({})
            }
			commonRequestData({
                apiName: `GetWordUserBusinessAreaList`,
                requestData: {
                    AreaCode: code
                }   
            })
            .then(res => {
				// console.log("获取区域列表 res：", res)
				if (res.errcode == 0) {
					if (Array.isArray(res.data) && res.data.length > 0) {
                        callback(res.data)
                    } else {
                        callback(false)
                    }
				    clearVantToa()
				} else {
					failTextVantToa(res.message)
                        callback(false)
				}
			}, res => {
				console.log("fail: res", res)
				if (res.errcode != 2000) {
					failTextVantToa("服务器正在修整，请稍后")
				}
                callback(false)
			})
			.catch(res => {
				console.log("catch：res", res)
				failTextVantToa("服务器正在修整，请稍后")
                callback(false)
            })
        },
        // 填充省级筛选区域列表
        addAreaProvince(data) {
            const that = this
            data.forEach(item => {
                that.areaList.province.push({
                    code: item.Code,
                    name: item.AreaName,
                    series: item.Series,
                    count: item.ItemCount
                })
            })
        },
        // 填充市级筛选区域列表
        setAreaCity(data) {
            const that = this
            if (that.areaList.city.length > 0) {
                that.areaList.city.splice(0, that.areaList.city.length) // 清空数组
            }
            // console.log('that.areaList.city', that.areaList.city)
            data.forEach(item => {
                that.areaList.city.push({
                    code: item.Code,
                    name: item.AreaName,
                    series: item.Series,
                    count: item.ItemCount
                })
            })
            // console.log('that.areaList.city', that.areaList.city)
        },
        // 点击省级，显示市级
        selectProArea(code, name) {
            const that = this
            that.provinceActCode = code
            that.provinceActName = name
            that.getAreaList({ // 获取市级区域列表
                code,
                callback(data) {
                    that.setAreaCity(data || [])
                }
            })
        },
        // 点击市级级，执行筛选
        selectCityArea(code, name) {
            const that = this
            that.cityActCode = code
            this.filterMemberList({areaCode: code, areaName: name})
        },
        // 重新筛选人员列表
        filterMemberList({areaCode, areaName}) {
            this.$emit('filterMemberList', {areaCode, areaName})
            this.hideOverlayShow()
        }
    },
    mounted() {
        const that = this
        that.getAreaList({ // 获取省级区域列表
            isFitst: 1,
            callback(data) {
                if (data) {
                    that.addAreaProvince(data)
                }
            }
        })
    },
    computed: {
        isShowAreaFilter() {
            return this.showWindow === 'area' && this.overlayShow
        },
        showAreaParClass() {
            if (this.isShowAreaFilter) {
                return 'opt-filter-act'
            }
            return ''
        },
        selectAreaIconClass() {
            if (this.isShowAreaFilter) {
                return 'select-area-ing-icon'
            }
            return ''
        },
    },
}
</script>

<style lang="scss" scoped>
.filter-top {
    height: 40px;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    padding: 0 15px;
    background: #f3f3f3;
    position: relative;

    .opt-filter {
        cursor: pointer;

        .select-area-icon {
            transform: rotate(90deg);
            font-size: 14px;
            font-weight: bold;
        }

        .select-area-ing-icon {
            transform: rotate(-90deg);
            font-size: 14px;
            font-weight: bold;
        }
    }

    // 筛选区域弹窗
    #area-list-filter-window {
        width: 100%;
        height: 210px;
        position: fixed;
        top: 120px;
        left: 0;
        z-index: 2;
        background: white;
        display: -webkit-flex;
        display: flex;

        .area-list-filter-chi {
            overflow-y: scroll;
            height: 100%;

            .area-list-filter-chi-opt {
                display: block;
                width: 100%;
                height: 30px;
                border-bottom: 1px solid #dadada;
                text-align: center;
                line-height: 30px;
                color: #999999;
                font-size: 12px;
            }
        }

        #area-list-filter-window-first {
            width: 40%;
            border-right: 1px solid #eeeeee;

            .area-list-filter-window-first-opt-active {
                background: #eeeeee !important;
                color: #0077bf !important;
            }
        }

        #area-list-filter-window-second {
            width: 60%;
            background: #eeeeee;

            .area-list-filter-window-second-opt-active {
                background: #cccccc !important;
                color: #0077bf !important;
            }
        }
    }
}

.opt-filter-act {
    color: #0077bf;
    z-index: 2;
}
</style>